<div class="comment__header">
  <a href="<%= URL.user(comment.user) %>" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      <%= comment.user.name %>
      <% if (org_name = commenter_organization_membership(comment, commentable)) %>
        <span class="c-indicator c-indicator--subtle c-indicator--round c-indicator--relaxed p-1 px-2" title="Member of <%= org_name %>">
          <%= org_name %>
        </span>
      <% end %>
    </span>
    <% if commentable_author_is_op?(commentable, comment) %>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="<%= get_ama_or_op_banner(commentable) %>">
        <%= crayons_icon_tag("small-medal") %>
      </span>
    <% end %>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-<%= comment.id %>" aria-controls="comment-profile-preview-content-<%= comment.id %>" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="<%= t("views.users.details", user: comment.user.name) %>">
      <%= comment.user.name %>
      <% if (org_name = commenter_organization_membership(comment, commentable)) %>
        <span class="c-indicator c-indicator--subtle c-indicator--round c-indicator--relaxed p-1 px-2" title="Member of <%= org_name %>">
          <%= org_name %>
        </span>
      <% end %>
      <%= subscription_icon(comment.user) %>
    </button>
    <%= render "/shared/profile_preview_card", actor: comment.user, id: "comment-profile-preview-content-#{comment.id}" %>
    <% if commentable_author_is_op?(commentable, comment) %>
      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="<%= get_ama_or_op_banner(commentable) %>">
        <%= crayons_icon_tag("small-medal") %>
      </span>
    <% end %>

  </div>

  <%= render "comments/comment_date", decorated_comment: decorated_comment %>

  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-<%= comment.id %>" aria-controls="comment-dropdown-<%= comment.id %>" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon <%= should_be_hidden?(comment, @root_comment) ? "element-hidden-by-commentable-user" : "" %>"
      aria-label="<%= t("views.comments.menu.aria_label") %>" aria-haspopup="true">
      <%= crayons_icon_tag("small-overflow-horizontal", class: "pointer-events-none", title: t("views.comments.menu.icon")) %>
    </button>
    <div id="comment-dropdown-<%= comment.id %>" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="<%= contextual_comment_url(comment, article: @article) %>" class="crayons-link crayons-link--block permalink-copybtn" aria-label="<%= t("views.comments.menu.copy.aria_label", user: comment.user.name) %>" data-no-instant><%= t("views.comments.menu.copy.text") %></a></li>
        <li class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= URL.comment(comment) %>/settings" aria-label="<%= t("views.comments.menu.settings.aria_label", user: comment.user.name) %>"></li>
        <% unless comment.by_staff_account? %>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="<%= commentable&.user_id %>" data-user-id="<%= comment.user_id %>">
            <% if comment.hidden_by_commentable_user %>
              <a href="#" class="crayons-link crayons-link--block unhide-comment" data-hide-type="unhide" data-comment-id="<%= comment.id %>" aria-label="<%= t("views.comments.menu.action.aria_label", action: t("views.comments.menu.action.unhide"), user: comment.user.name) %>">
                <%= t("views.comments.menu.action.unhide_text") %>
              </a>
            <% else %>
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="<%= comment.id %>"
                data-comment-url="<%= URL.url(comment.path) %>"
                aria-label="<%= t("views.comments.menu.action.aria_label", action: t("views.comments.menu.action.hide"), user: comment.user.name) %>">
                <%= t("views.comments.menu.action.hide_text") %>
              </button>
            <% end %>
          </li>
        <% end %>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="<%= URL.comment(comment) %>/mod" aria-label="<%= t("views.comments.menu.moderate.aria_label", user: comment.user.name) %>"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= URL.comment(comment) %>" aria-label="<%= t("views.comments.menu.report.aria_label", user: comment.user.name) %>"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>
